<template>
	<view class="page">
		<view class="op" >

		</view>
		<view style="height: 150upx;width: 100%;z-index: 999;">
			<scroll-view class="scroll_t_view" scroll-into-view="right" scroll-x="true" :scroll-left="id" @scroll="">
				<view 
					v-for="(calen, index) in yueri" v-bind:key="calen" class="scroll-view">
					<view  	:class="['view-' + (index + 1), { 'selected': selectedIndex === index }]"  @tap="xuan_fun(calen.rq, index, calen.year, calen.month, calen.date,index)">

						<view class="box1" style="font-size: 13px;">{{ calen.xq }}</view>
						<view class="box1" style="font-weight: bold;">{{ calen.rq }}</view>
					</view>
				</view>

			</scroll-view>
		</view>
	</view>
</template>

<script>
var yous = null;
var you_this = null;
export default {
	props: ['xuanid', 'yearc', 'monthc', 'datec', 'viewWidth'],
	data() {
		return {

			zuo: '0',
			you: '4',
			id: 0,
			mbr: 82.8,
			selectedIndex:-1,
			year: '',
			month: '',
			date: '',
			yueri: '',
			vue_s: {
				rq: '',
				xq: ''
			}
		};
	},
	created() {

		uni.getSystemInfo({
			success: function (res) {
				you_this = parseInt(res.screenWidth);

			}
		});
		this.riqi();
		this.mbr = (you_this * (parseInt(this.viewWidth) / 100)) / 5;


		let myDate = new Date();
		let nian = myDate.getFullYear();    //获取完整的年份(4位,19this.mbr-????)
		let yue = myDate.getMonth() + 1;       //获取当前月份(0-11,0代表1月)
		let ri = myDate.getDate();
		for (let y = 0; y < 100; y++) {
			let xian_myDate = (Date.parse(new Date(nian + '/' + yue + '/' + ri)) / 1000 + 86400 * y);
			let riq = ((new Date(parseInt(xian_myDate) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' ')).substr(0, 9)).split("/");

			if (riq[0] + "/" + riq[1] + "/" + riq[2] == this.yearc + "/" + this.monthc + "/" + this.datec) {
				this.xuan_fun(this.xuanid, y, this.yearc, this.monthc, this.datec);
				break;
			}
		}


	},

	methods: {
		riqi() {
			let month_date = [];
			let myDate = new Date();
			let nian = myDate.getFullYear();    //获取完整的年份(4位,19this.mbr-????)
			let yue = myDate.getMonth() + 1;       //获取当前月份(0-11,0代表1月)
			let ri = myDate.getDate();        //获取当前日(1-31)
			this.year = nian;
			this.month = yue;
			this.date = ri;
			let dates_time = new Date(nian + '/' + yue + '/' + ri);
			for (let i = 0; i < 100; i++) {
				let xian_myDate = (Date.parse(dates_time) / 1000 + 86400 * i);
				let riq = ((new Date(parseInt(xian_myDate) * 1000).toLocaleString().replace(/:\d{1,2}$/, ' ')).substr(0, 9)).split("/");
				let number = parseInt(new Date(riq[0] + '/' + riq[1] + '/' + riq[2]).getDay());
				let date_name_two = '今天';
				//console.log(riq[0]+'-'+riq[1]+'-'+riq[2]);
				if (number == 1) {
					date_name_two = '周一';

				} else if (number == 2) {
					date_name_two = '周二';

				} else if (number == 3) {
					date_name_two = '周三';

				} else if (number == 4) {
					date_name_two = '周四';

				} else if (number == 5) {
					date_name_two = '周五';

				} else if (number == 6) {
					date_name_two = '周六';

				} else {
					date_name_two = '周日';

				}
				var obj = { rq: riq[1] + "/" + riq[2], xq: date_name_two, year: riq[0], month: riq[1], date: riq[2] };



				month_date.push(obj);
			}
			this.yueri = month_date;
			// console.log(this.yueri)


		},
		you_xun: function (you) {
			yous = you;
			you_this = this;
			setTimeout(function () {

				you_this.id = you_this.id + 15;

				if (you_this.id > (yous - 1) * you_this.mbr) {
					you_this.id = (yous - 1) * you_this.mbr;
					return;
				} else {
					you_this.you_xun(yous);
				}
			}, 10);
		},
		zuo_xun(you) {
			yous = you;
			you_this = this;
			setTimeout(function () {

				you_this.id = you_this.id - 15;


				if (you_this.id < (yous - 3) * you_this.mbr) {
					you_this.id = (yous - 3) * you_this.mbr;


					return;
				} else {
					you_this.zuo_xun(yous);
				}
			}, 10);
		},
		parentHandleclick: function () {
			// console.log("你好");
		},
		xuan_fun(rq, ids, year, month, date,index) {

			if(	this.selectedIndex = index)
			{
				// 如果点击的是已经选中的元素，则取消选中
				this.selectedIndex = -1;

			}else
			{
				console.log(123)
				this.selectedIndex = index;

			}


			// if( this.yueri[index].daten == date ){
			// 		this.yueri[index].date = date;
			// 		console.log('未选中')
			// 	} else{
			// 		for( let i in this.dayWeekList ){
			// 			this.dayWeekList[i].state = false;
			// 		};
			// 		this.dayWeekList[index].state = true;
			// 		console.log('已选中：' + item.year + '/' + item.monDate + '/' + item.week)
			// 	}

			
			//this.xuan_id=rq;
			this.$emit('fundata', {
				year: year,
				month: month,
				date: date,
			});
			if (ids == this.you) {
				if (ids > this.yueri.length - 3) {
					this.id = (this.yueri.length - 1) * this.mbr;
					this.zuo = this.yueri.length - 5;
					this.you = this.yueri.length - 1;
					return;
				}
				this.you_xun(ids);
				this.zuo = ids - 1;
				this.you = ids + 3;

			} else if (ids == this.zuo) {
				if (ids < 3) {
					this.id = 0;
					this.zuo = 0;
					this.you = 4;
					return;
				}
				this.zuo_xun(ids);
				this.zuo = ids - 3;
				this.you = ids + 1;

			} else {
				if (this.zuo + 1 == ids || this.zuo + 2 == ids || this.zuo + 3 == ids) {
					return;
				}
				this.id = (ids - 2) * this.mbr;
				this.zuo = ids - 2;
				this.you = ids + 2;
			}

		},
		selDayWeek(index, item) {
			if (this.dayWeekList[index].state) {
				this.dayWeekList[index].state = false;
				// console.log('未选中')
			} else {
				for (let i in this.dayWeekList) {
					this.dayWeekList[i].state = false;
				};
				this.dayWeekList[index].state = true;
				// console.log('已选中：' + item.year + '/' + item.monDate + '/' + item.week)
			}
		},




	}
};
</script>
<style lang="scss">
scroll-view {
	display: flex;

}

.scroll-view {
	width: 23%;
	padding-top: 25upx;
	height: 200upx;

	display: inline-block;
	line-height: 150upx;
	text-align: center;

}

.scroll_t_view {
	width: 100%;
	height: 130upx;

	flex-wrap: nowrap;
	white-space: nowrap;
}

.box {
	border: 1px solid #eee;
	border-radius: 10px;
	padding-bottom: 5px;
	border-top: none;
	background: rgb(184, 177, 172)!important;
	line-height: 50upx;
	padding-top:3px;
	height: 80upx;
	margin-left: 10px;

	.box1 {
		margin: auto;
		width: 90%;
		text-align: center;
		color: #474444;
		font-size: 28upx;
	}
}

.rq_css {
	margin-left: 5%;
	width: 100%;
	height: 50upx;
	line-height: 50upx;
	text-align: center;
	color: white;
	font-size: 26upx;
}

.selected {
	border: 1px solid blue;
  }
.xuan_top {}

.op {
	height: 150upx;
	opacity: 0.8;
	position: absolute;
	top: 0upx
}

.box_select {
	border: 1px solid #eee;
	border-radius: 10px;
	padding-top: 10px;
	padding-bottom: 10px;
	color: #ffffff;
	margin-left: 10px;
}
</style>
